<!--
 * @Description: 
 * @Autor: starzhou
 * @Date: 2020-09-04 10:13:40
 * @LastEditTime: 2020-09-04 22:01:12
-->
<style>
.transfer-dialog .el-dialog__footer {
  padding: 10px 20px 20px;
  text-align: center;
  box-sizing: border-box;
}
.transfer-dialog .el-transfer-panel .el-checkbox__inner {
  width: 14px !important;
  border-radius: 3px;
}

.transfer-dialog .el-transfer-panel__filter .el-input__inner {
  border-radius: 4px;
}

.transfer-dialog .el-transfer-panel__item .el-checkbox__input {
  line-height: 1 !important;
}

.transfer-dialog .el-transfer-panel__header span {
  width: auto !important;
}

.transfer-dialog .el-transfer-panel__body .el-input__prefix {
  width: auto !important;
}

.transfer-dialog .el-dialog .el-dialog__body {
  display: flex;
  justify-content: center;
}
.transfer-dialog .el-transfer-panel .el-transfer-panel__header {
  display: none;
}
.transfer-dialog .el-checkbox-group::-webkit-scrollbar {
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.transfer-dialog .el-checkbox-group::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #edf2fc;
}
.transfer-dialog .el-checkbox-group::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #fff;
}
.transfer-dialog .el-button--default {
  background: #edf2fc;
  border: none;
}
.transfer-dialog .el-dialog__body {
    padding: 0 20px 30px;
}

.transfer-dialog .el-transfer-panel__body {
    height: 300px;
}

.transfer-dialog .el-transfer-panel__list.is-filterable {
   height: 246px;
}
</style>
<template>
  <el-dialog
    class="transfer-dialog"
    title="选择传阅对象"
    :visible.sync="dialogVisible"
    width="630px"
    :before-close="handleClose"
  >
    <div style="text-align: center">
      <el-transfer
        style="text-align: left; display: inline-block"
        v-model="value4"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :titles="['Source', 'Target']"
        :button-texts="['', '']"
        :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
        @change="handleChange"
        :data="data"
      >
        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
      </el-transfer>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: "transfer",
  data() {
    const generateData = () => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`
        });
      }
      return data;
    };
    return {
      dialogVisible: true,
      data: generateData(),
      value: [1],
      value4: [1],
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },
    };
  },

  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
};
</script>